<template>
  <div class="form-text">
    <el-select :value="value" :multiple="isMulti" :placeholder="$t('common.placeholder.select')" @input="update" collapse-tags>
      <el-option
        v-for="item in currencyList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>


<script>
import FormMixin from '@src/component/form/mixin/form';
import { currencyOption } from '@src/util/currency'
export default {
  name: 'form-currency-type',
  mixins: [FormMixin],
  props: {
    value: {
      type: String | Array,
      default: ''
    },
    isMulti: {
      type: Boolean,
      default: false
    },
    isDisplayZH: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currencyOption
    }
  },
  computed: {
    currencyList() {
      if(this.isDisplayZH) {
        return this.currencyOption.map(x => {
          return { value: x.value, label: x.value };
        })
      }
      return this.currencyOption;
    }
  },
  methods: {
    update(newValue) {
      let oldValue = null;
      this.$emit("input", newValue);
      this.$emit("update", { newValue, oldValue, field: this.field });
    }
  },
}
</script>

<style lang="scss">
.form-text{
  width: 100%;

  .el-select__tags {
    max-width: inherit !important;
  }
}
</style>